<template>
  <div>
    <headerX></headerX>

    <div class="content" v-if="items">
      <div class="top">
        <div v-if="banner" class="imgbox">
          <img :src="banner[0].image" alt="" />
        </div>
      </div>
      <div class="tongzhi">
        <van-notice-bar
          left-icon="volume-o"
          text="今日特价:紫色玫瑰10枝+白色洋兰12枝，紫色玫瑰品种随机。"
        />
      </div>
      <div class="main">
        <van-tree-select
          height="100vw"
          :items="items"
          :main-active-index.sync="active"
          :active-id="activeIds"
        >
          <template #content v-if="right[active]">
            <ul class="contentRight">
              <div style="padding: 5px 0">
                <p>
                  {{ items[active].text ? items[active].text : "热卖爆品" }}
                </p>
              </div>
              <li @click="clickItem(l)" v-for="(l, i) in right[active]" :key="i">
                <div class="content">
                  <div class="left">
                    <img :src="l.thumb" alt="" />
                  </div>

                  <div class="right">
                    <p>
                      {{ l.title }}
                      <img
                        v-for="(a, b) in l.icon_list"
                        :src="a"
                        alt=""
                        :key="b"
                      />
                    </p>
                    <span class="van-ellipsis">{{ l.sub_title }}</span>
                  </div>
                </div>
              </li>
            </ul>
          </template>
        </van-tree-select>
      </div>
    </div>

    <foot></foot>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      items: [],
      active: "",
      activeId: 1,
      activeIndex: 0,
      left: "",
      banner: "",
      right: [],
      activeIds:[]
    };
  },

  mounted() {
    setTimeout(() => {
      axios({
        method: "get",
        url: `http://localhost:3200/mark`,
      }).then((res) => {
        this.left = res.data.left.labels;
        this.banner = res.data.left.banner;
        var list = [];
        var arr = {};
        var brr = [];
        for (var i = 0; i < this.left.length; i++) {
          list.push(this.left[i].name);
          arr = { text: list[i] };
          brr.push(arr);
        }
          this.items = brr;
          // console.log(brr);
          this.right = res.data.right;


         var  list1=[]
        for(i=0;i<this.right.length;i++){
            list1.push(this.right[i].id)
        }
        console.log(list1);
      });
    }, 500);
  },

  methods:{
    clickItem(data){
      this.$router.push({name:'shopping',query:{id:data.id}})
    }
  }
};
</script>

<style lang="scss" scoped>
.top {
  .imgbox {
    width: 100%;
    height: 20%;
    background-color: rgba(244, 200, 0, 0.3);
    padding: 10px 50px;
    margin-left: 50px;
    display: table-cell;
    text-align: center;
    text-align: center;
    img {
      width: 100%;
    }
  }
}

.contentRight {
  padding: 10px;
  .content {
    background-color: #fff;
    display: flex;

    width: 100%;
    height: 80px;
    .left {
      img {
        width: 80px;
        height: 80px;
      }
    }
  }
  .right {
    flex: 1;
    flex-wrap: wrap;
    display: flex;
  }
  li {
    margin: 5px 0;
    span {
      width: 150px;
      height: 12px;
      line-height: 12px;
    }

    p {
      overflow: hidden;
      width: 150px;
      max-height: 40px;
      display: flex;
      flex-wrap: wrap;
      // height: 28px;
      // flex-shrink: 0;
    }
    img {
      margin-left: 3px;
      width: 28px;
      height: 18px;
    }
  }
}

.content {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>